<template>
    
</template>
<script>
export default {
    name: 'c_tech_heatmap',
    data() {
        return {
            viewer:null,
            heatmapRect:null,
            heatmapInstance:null,
            heatmapContainer:null,
            bound:{
                xMin:118.11866526713582-0.01, 
                yMin:27.295978058988748-0.01, 
                xMax:118.11866526713582+0.01, 
                yMax:27.295978058988748+0.01
            },
            calcWid:1000,
            calcHei:1000
        }
    },
    props:{
        pnts:{
            type:Array,
            default:()=>{return []}
        },
        gradient:{
            type:Object,
            default:()=>{return {
                '.3': 'blue',
                '.5': 'green',
                '.7': 'yellow',
                '.95': 'red'
            }}
        },
        above:{
            type:Boolean,
            default:true
        }
    },
    watch: {
        pnts: {
            handler(){
                this.getBound()
                this.update()
            }
        },
        deep: true
    },
    mounted () {
        let t=this
        this.$nextTick(async ()=>{
            t.Cesium=t.$parent.Cesium
            t.viewer=t.$parent.viewer
            t.getBound()
            await t.crtH337()
            t.update()
            t.crtHeatmapRect()
        })
    },
    methods:{
        update(){
            let t=this
            let points=t.getDrawPoints()
            // let points=this.testPoints()
            let data={
                max:1,
                data:points
            }
            if(!this.heatmapInstance)this.crtH337()
            this.heatmapInstance.setData(data)
            console.log(this.heatmapInstance)
            var image =this.convertCanvasToImage(this.heatmapInstance._renderer.canvas)
            if(!this.heatmapRect)this.crtHeatmapRect()
            this.heatmapRect.appearance.material.uniforms.image=image.src;
        },
        async crtH337(){
            let t=this
            let {xMin, yMin, xMax, yMax}=this.bound
            this.heatmapContainer = document.createElement('div');
            t.calcHei = parseInt(t.calcWid*(yMax-yMin)/(xMax-xMin));
            this.heatmapContainer.setAttribute('style','width:'+t.calcWid+'px;height:'+t.calcHei+'px');
            // this.heatmapContainer.setAttribute('style','width:'+t.calcWid+'px;height:'+t.calcHei+'px'+';z-index:99999;position:absolute;top:0px');
            document.body.appendChild(this.heatmapContainer);
            this.heatmapInstance =await h337.create({
                container: t.heatmapContainer,
                maxOpacity: .4,
                radius:10,
                minOpacity: .1,
                gradient:  {
                    '.3': 'blue',
                    '.5': 'green',
                    '.7': 'yellow',
                    '.95': 'red'
                }
            });
        },
        crtHeatmapRect(){
            let t=this
            let {Cesium,viewer}=t
            if(!Cesium || !viewer)return
            let {xMin, yMin, xMax, yMax}=this.bound
            t.heatmapRect=viewer.scene.primitives.add(
                new Cesium.GroundPrimitive({
                    geometryInstances : new Cesium.GeometryInstance({
                        geometry : new Cesium.RectangleGeometry({
                            rectangle : Cesium.Rectangle.fromDegrees(xMin, yMin, xMax, yMax),
                            vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
                        })
                    }),
                    appearance : new Cesium.EllipsoidSurfaceAppearance({
                        aboveGround : true
                    }),
                    show : true
                })
            )
            var img=t.convertCanvasToImage(t.heatmapInstance._renderer.canvas)
            t.heatmapRect.appearance.material = new Cesium.Material({
                fabric : {
                    type : 'Image',
                    uniforms : {
                        image : img.src
                    }
                }
            });
        },
        getDrawPoints(){
            let {xMin, yMin,xMax,yMax}=this.bound
            let {calcWid,calcHei}=this
            let points=[]
            for(let i=0;i<this.pnts.length;i++){
                let {lat,lon}=this.pnts[i]
                points.push({
                    x:(lon-xMin)/(xMax-xMin)*calcWid,
                    y:(lat-yMin)/(yMax-yMin)*calcHei,
                    value:0.25
                })
            }
            return points
        },
        getBound(){
            // let xMin=73.33,xMax=135.05
            // let yMin=3.51,yMax=53.33
            let cen={x:118.11866526713582, y:27.295978058988748}
            let {x,y}=cen
            let off1=0.005
            let xMin=x-off1,xMax=x+off1
            let yMin=y-off1,yMax=y+off1
            for(let i=0;i<this.pnts.length;i++){
                let {lat,lon}=this.pnts[i]
                xMin=lon < xMin ? lon : xMin
                xMax=lon > xMax ? lon : xMax
                yMin=lat < yMin ? lat : yMin
                yMax=lat > yMax ? lat : yMax
            }
            let diff=0.0
            this.bound={xMin:xMin-diff, yMin:yMin-diff, xMax:xMax+diff, yMax:yMax+diff}
        },
        convertCanvasToImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            return image;
        },
        testPoints(){
            let pnts=[]
            let cen={x:118.11866526713582, y:27.295978058988748}
            for(let i=0;i<300;i++){
                pnts.push({
                    lon:cen.x+(Math.random()-0.5)*0.01,
                    lat:cen.y+(Math.random()-0.5)*0.01
                })
            }
            let points=[]
            let {xMin, yMin,xMax,yMax}=this.bound
            let {calcWid,calcHei}=this
            for(let i=0;i<300;i++){
                let {lat,lon}=pnts[i]
                points.push({
                    x:Math.floor((lon-xMin)/(xMax-xMin)*calcWid),
                    y:Math.floor((lat-yMin)/(yMax-yMin)*calcHei),
                    value:0.02
                })
            }
            return points
        }
    }

}
</script>